<template>
    <view class="card">
        <view class="title">
            <text
                class="tag"
                v-if="isLocation == 1"
            >当前</text>
            {{storeName}}
        </view>
        <view class="desc">{{storeAddress}}</view>
        <view style="display:flex; justify-content: space-between;align-items:center">
            <view class="distance" @click.stop="showLocationToast">
				<text>距离 </text> {{distance||'--km'}}
				<u-icon name="question-circle-fill" color="#333" size="12" v-if="!distance" ></u-icon>
			</view>
            <view class="">
                <image
                    @click.stop="callPhone()"
                    class="icon-image"
                    :src="phoneImg"
                    mode=""
                ></image>
                <image
                    @click.stop="navi"
                    class="icon-image"
                    :src="naviImg"
                    mode=""
                ></image>
            </view>
        </view>
    </view>
</template>

<script>
import {bMapToQQMap} from '../../util/index.js';
	
export default {
    name: 'store-card',
    props: {
        isLocation: {
            type: String | Number,
            default: 0
        },
        storeName: {
            type: String,
            default: ''
        },

        storeAddress: {
            type: String,
            default: ''
        },

        distance: {
            type: String,
            default: ''
        },
        phone: {
            type: String,
            default: ''
        },

        longitude: {
            type: Number,
            default: 0
        },
        latitude: {
            type: Number,
            default: 0
        }
    },
	data(){
		return{
			naviImg:this.baseImageUrl+'uni_rental/导航_icon@2x.png',
			phoneImg:this.baseImageUrl+'uni_rental/电话_icon@2x.png'
		}
	},
    methods: {
        callPhone() {
            uni.makePhoneCall({
                phoneNumber: this.phone,
                success: (res) => {
                    console.log('拨打电话成功');
                }
            })
        },
        navi() {
			
			const qqLatLng = bMapToQQMap(this.latitude, this.longitude);
			
			console.log('点击了导航');
            uni.openLocation({ //​使用微信内置地图查看位置。
                latitude: qqLatLng[0], //要去的纬度-地址
                longitude: qqLatLng[1], //要去的经度-地址
                name: this.storeName,
                address: this.storeAddress,
                success() {
                    console.log('成功了');
                },
                fail(msg) {
                    console.log(msg)
                }
            })
        },
		
		showLocationToast(){
			if(!this.distance){
				uni.showToast({
					icon:'none',
					title:'请先允许位置授权',
				})
			}
			
		}
    }
}
</script>

<style lang="scss" scoped>
.card {
    padding: 32upx 36upx;
    background: #fff;
    border-radius: 16upx;
}

.title {
    font-size: 26upx;
    font-weight: bold;
    color: #333;
    margin-bottom: 19upx;
	display: flex;
	align-items: center;
}

.tag {
    padding: 0 9upx;
    color: #fff;
    font-size: 20upx;
    border-radius: 3upx;
    background-color: #F83C57;
    margin-right: 7upx;
}

.desc {
    font-size: 24upx;
    color: #999;
    margin-bottom: 30upx;
}

.distance {
    font-size: 26upx;
    font-weight: bold;
    color: #333;
	display: flex;
	align-items: center;
	
    text {
        color: #999;
        margin-right: 10upx;
    }
}

.icons {
    display: flex;
    width: 200upx;
    justify-content: space-between;
}

.icon-image {
    width: 34upx;
    height: 34upx;
    margin-left: 70upx;
}
</style>